<template>
    <div style="background-color: #fff;">
      <div style="padding:0 20px 20px 20px">
          <div style="padding: 0 0 10px 0;">
            <el-button type="info" plain class="myBtn" @click="close">返回</el-button>
          </div>
          <el-descriptions :column="2" size="small" border>
            <el-descriptions-item label="标题" label-class-name="yutitem">{{details.title}}</el-descriptions-item>
            <el-descriptions-item label="状态" label-class-name="yutitem">
              <template v-if="details.isSend==0">未发送</template>
              <template v-else-if="details.isSend==1">已发送</template>
            </el-descriptions-item>
            <el-descriptions-item label="发送日期" label-class-name="yutitem">{{details.isSend==1?details.updateTime:'--'}}</el-descriptions-item>
            <el-descriptions-item label="创建人" label-class-name="yutitem">{{details.createName}}</el-descriptions-item>
            <el-descriptions-item label="创建日期" label-class-name="yutitem">{{details.createTime}}</el-descriptions-item>
            <el-descriptions-item label="通知方位" label-class-name="yutitem">
              <template v-if="details.notifyArea">
                <span v-for="(dt,index) in JSON.parse(details.notifyArea)" :key="index">
                  {{dt.province}}{{dt.city}}{{dt.area}}
                  <template v-if="index<JSON.parse(details.notifyArea).length-1">、</template>
                </span>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label="通知内容" :span="2" label-class-name="yutitem">
                <div class="xxqxcon" v-html="details.content" style="white-space:pre-line;"></div>
            </el-descriptions-item>
        </el-descriptions>
        
      </div>
    </div>
  </template>
  
  <script setup>
  // 这里的name是为了做页面缓存，其值要跟路由里面的name值一样
  
  import { nextTick, ref, reactive,watch, onActivated,onMounted} from 'vue'
  import{useRouter,useRoute} from "vue-router"

  import {addNotify,addNotifyDetail,editNotify} from '@/api/system'

  import { useUserStore } from '@/pinia/modules/user'
  import { emitter } from '@/utils/bus.js'
  import mainLayout from '@/components/custom/mainLayout.vue'
  import { message } from '@/utils/element'
 

  const router = useRouter()
  const route = useRouter()
  const userStore = useUserStore()
  
  const notifyId = ref('')
  const details = ref({})
  
  onMounted(async ()=>{
    notifyId.value = route.currentRoute.value.query.id
    if(notifyId.value){
      const res = await addNotifyDetail(notifyId.value)
      if(res.code == 0 || res.success){
        details.value = res.data
      }else{
        message('获取数据出错了',3)
      }
    }
  })
  

  const close = ()=>{
    emitter.emit('closeThisPage')
  }
  
  </script>
  
  <style lang="scss">
.el-descriptions__label{
  &.yutitem{
    width: 100px;
    word-wrap: break-word;
    word-break: break-all;
  }
}
.xxqxcon{
  img{
    max-width: 100%!important;
  }
}
</style>